<extend name="Base/common"/>
<block name="head_css">
<link href="__PUBLIC__/css/bootstrap-datepicker3.min.css" rel="stylesheet" media="screen">
<link href="__PUBLIC__/css/font-awesome.min.css" rel="stylesheet">
<link href="__PUBLIC__/css/awesome-bootstrap-checkbox.css" rel="stylesheet">
</block>
<block name="head_script">
</block>
<block name="body">
    <div class="insurance">
        <div class="width1000">
            <div class="step_info">
                <div class="write_info on">录入保单信息</div>
                <div class="get_price">获取精确报价</div>
                <div class="cash_money">支付保单</div>
                <div style="clear:both"></div>
            </div>
            <div class="ins_tab">
                <a href="javascript:void(0);" class="f_l ins_tab_li">定制我的车险</a>
                <a href="{:U('Premium/index')}" class="f_l">试算我的保费</a>
            </div>
            <div class="form_all">
            <form class="form-horizontal frmValidate" action="__SELF__">
              <div class="form-group">
                <label for="province" class="col-sm-2 control-label">所在地区</label>
                <div class="col-sm-2">
                  <select class="form-control" id="province" name="province" placeholder="省份">
                    <volist name="province" id="item">
                        <option value="{$item.province_id}">{$item.province_name}</option>
                    </volist>
                  </select>
                </div>
                <div class="col-sm-2">
                  <select class="form-control" id="c_dpt_cde" name="c_dpt_cde" placeholder="地区">
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label for="c_lcn_no" class="col-sm-2 control-label">车牌号码</label>
                <div class="col-sm-3">
                  <div class="input-group">
                      <span class="input-group-addon" id="car_prefix">@</span>
                      <input type="text" class="form-control" name="c_lcn_no" id="c_lcn_no" placeholder="车牌号码">
                      <input type="hidden" name="car_prefix" id="car_prefix_v" value="" />
                  </div>
                </div>
                <div class="col-sm-2">
                    <div class="checkbox">
                        <input type="checkbox" name="c_new_vhl" id="c_new_vhl" value="1" class="styled">
                        <label for="c_new_vhl">新车未上牌</label>
                    </div>
                </div>
              </div>
              <div id="new_vhl_info" style="display: none;">
              <div class="form-group">
                <label for="buy_date" class="col-sm-2 control-label">购车发票开具日期</label>
                <div class="col-sm-4">
                <div class="input-group date form_date">
                  <input type="text" class="form-control" id="buy_date" name="buy_date" placeholder="购车发票开具日期" disabled="disabled">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                </div>
              </div>
              <div class="form-group">
                <label for="fuel_type" class="col-sm-2 control-label">能源种类</label>
                <div class="col-sm-2">
                  <select class="form-control" id="fuel_type" name="fuel_type" placeholder="能源种类" disabled="disabled">
                    <option value="0">汽油</option>
                    <option value="1">柴油</option>
                    <option value="2">混合</option>
                    <option value="3">电力</option>
                    <option value="4">天燃气</option>
                    <option value="5">液化石油气</option>
                    <option value="6">甲醇</option>
                    <option value="7">乙醇</option>
                    <option value="8">太阳能</option>
                    <option value="9">混合动力</option>
                    <option value="10">无</option>
                    <option value="11">其他</option>
                  </select>
                </div>
              </div>
              </div>
              <div class="form-group">
                <label for="c_vhl_frm" class="col-sm-2 control-label">车辆品牌</label>
                <div class="col-sm-4">
                  <select class="form-control" name="c_brnd_cde">
                    <?php 
                        $alpha = '';
                        foreach($brands as $v){
                            if($v['brand_alpha']!=$alpha){
                                $alpha = $v['brand_alpha'];
                    ?>
                            <optgroup label="{$v.brand_alpha}">{$v.brand_alpha}</optgroup>
                    <?php                            
                            }
                    ?>      
                            <option value="{$v.brand_name}">&nbsp;&nbsp;{$v.brand_name}</option>
                    <?php        
                        }
                    ?>
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label for="c_vhl_frm" class="col-sm-2 control-label">车辆识别代码</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="c_vhl_frm" name="c_vhl_frm" placeholder="车辆识别代码(17位)">
                </div>
              </div>
              <div class="form-group">
                <label for="c_eng_no" class="col-sm-2 control-label">发动机号码</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="c_eng_no" name="c_eng_no" placeholder="发动机号码(大于等于6位)">
                </div>
              </div>
              <div class="form-group">
                <label for="c_drv_owner" class="col-sm-2 control-label">车主姓名</label>
                <div class="col-sm-4">
                  <input type="text" class="form-control" id="c_drv_owner" name="c_drv_owner" placeholder="车辆行驶证上登记的姓名">
                </div>
              </div>
              <div class="form-group">
                <label for="c_fst_reg_dte" class="col-sm-2 control-label">车辆注册日期</label>
                <div class="col-sm-4">
                <div class="input-group date form_date">
                  <input type="text" class="form-control" id="c_fst_reg_dte" name="c_fst_reg_dte" placeholder="车辆注册日期">
                  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
                </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-offset-2 col-sm-3">
                  <button type="submit" id="submit_btn" class="btn btn-primary btn-block" data-loading-text="车辆信息查询中..." autocomplete="off">下一步</button>
                </div>
              </div>
            </form>
            </div>
        </div>
    </div>
    </block>
<block name="script">
<script type="text/javascript" src="__PUBLIC__/Green/js/insurance.js"></script>
<script type="text/javascript" src="__PUBLIC__/js/bootstrap-datepicker.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/js/locales/bootstrap-datepicker.zh-CN.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="__PUBLIC__/js/jquery.validate.additional.js" charset="UTF-8"></script>
<script type="text/javascript">
    $('#province').change(function(){
        var bId = $(this).val();
        $.post("{:U('area')}","province="+bId,function(data){
            if(data.status){
                var area = $('#c_dpt_cde');
                area.html('');
                for(var i=0;i<data.info.length;i++){
                    var o = data.info[i];
                    $('<option value="' + o.area_code + '" data="' + o.car_prefix + '">' + o.area_name + '</option>').appendTo(area);
                }
                $('#c_dpt_cde').trigger('change');
            }else{
                alert(data.info);
            }
        },'json');
    });
    
    $('#c_dpt_cde').change(function(){
        var val = $(this).find("option:selected").attr('data');
        $('#car_prefix').text(val);
        $('#car_prefix_v').val(val);
    });
    
    $('#c_new_vhl').change(function(){
        if($(this).prop('checked')){
            $('#c_lcn_no').attr('disabled',true);
            $('#new_vhl_info').toggle();
            $('#fuel_type').attr('disabled',false);
            $('#buy_date').attr('disabled',false);
        }else{
            $('#c_lcn_no').attr('disabled',false);
            $('#new_vhl_info').toggle();            
            $('#fuel_type').attr('disabled',true);
            $('#buy_date').attr('disabled',true);
        }
    });
    
    $('#province').trigger('change');

    $().ready(function(){
        $('.form_date').datepicker({
            format: "yyyy-mm-dd",
            todayBtn: "linked",
            language: "zh-CN",
            autoclose: true,
            todayHighlight: true
        });
        $('.frmValidate').validate({
            rules:{
                    c_lcn_no:{
                        required:true,
                        maxlength:5,
                        minlength:5
                    },
                    c_vhl_frm:{
                        required:true,
                        minlength:17,
                        maxlength:17
                    },
                    c_eng_no:{
                        required:true,
                        minlength:6
                    },
                    c_drv_owner:{
                        required:true
                    },
                    c_fst_reg_dte:{
                        required:true,
                        date:true
                    },
                    fuel_type:{
                        required:true
                    },
                    buy_date:{
                        required:true,
                        date:true
                    }
                },
            submitHandler:function(form){
                    var self = $(form);
                    $('#submit_btn').button('loading');
                    $.post(self.attr('action'), self.serialize(), function(data){
                        if(data.status){
                            window.location.href = data.url;
                        } else {
                            $('#submit_btn').button('reset');
                            alert(data.info);
                        }
                    }, "json");
                }            
        });
    });
</script>
</block>
